<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="styles/style.css">
        <link rel="stylesheet" href="styles/theme/atom-one-dark.css">
        <title>例子11-ES6/7常用语法介绍</title>
    </head>
    <body>
        <pre>
            <code>
                // 例子11

                let {x1 = 3} = {};
                console.log(x1); // 3

                let {x2, y2 = 5} = {x2: 1};
                console.log(x2, y2); // 1 5

                let {x3: y3 = 3} = {};
                console.log(y3); // 3

                let {x4: y4 = 3} = {x4: 5};
                console.log(y4); // 5

                let {x5 = 3} = {x: undefined};
                console.log(x5); // 3

                let {x6 = 3} = {x: null};
                console.log(x6); // null

                //--------------------------------------------------------------------------

                let {foo} = {bar: 'baz'};
                console.log(foo); // undefined

                //--------------------------------------------------------------------------
                let arr = [1, 2, 3];
                let {0 : first, [arr.length - 1] : last} = arr;
                console.log(first, last); // 1 3

                //--------------------------------------------------------------------------

                //下面这个例子报错的原因：{bar} = undefined,在匹配bar时，就变成了去匹配undefined.bar,也就是在undefined下再取子属性
                let {foo: {bar}} = {baz: 'baz'}; // Uncaught TypeError: Cannot destructure property `bar` of 'undefined' or 'null'
                console.log(bar);

                //--------------------------------------------------------------------------
                let x;
                ({x} = {x: 1}); // 如果没有括号，发生语法错误:Uncaught SyntaxError: Unexpected token =,因为这里{x}被理解为一个代码块

                console.log(x);
            </code>
        </pre>
        <script src="scripts/libs/highlight.pack.js"></script>
        <script src="scripts/11.js"></script>
        <script>
            hljs.initHighlightingOnLoad();
        </script>
    </body>
</html>